<template>
  <div>
    <HeadNav></HeadNav>
    <div class="box">
      <div class="left_nav">
        <ul>
          <li>
            <svg
              t="1641701518755"
              class="icon"
              viewBox="0 0 1024 1024"
              version="1.1"
              xmlns="http://www.w3.org/2000/svg"
              p-id="2725"
              width="24"
              height="18"
            >
              <path
                d="M919.2 419.2L531.2 141.6c-11.2-8-26.4-8-36.8 0L104 419.2c-12.8 8.8-6.4 28.8 9.6 28.8H192v432c0 8.8 7.2 16 16 16h192c8.8 0 16-7.2 16-16V640h192v240c0 8.8 7.2 16 16 16h192c8.8 0 16-7.2 16-16V448h78.4c15.2 0 21.6-20 8.8-28.8z"
                p-id="2726"
              ></path>
            </svg>
            后台首页
          </li>
          <li>
            <svg
              t="1641701816576"
              class="icon"
              viewBox="0 0 1024 1024"
              version="1.1"
              xmlns="http://www.w3.org/2000/svg"
              p-id="3651"
              width="24"
              height="18"
            >
              <path
                d="M879.914071 232.077336c10.998926 0 19.998047 8.999121 19.998047 19.998047v519.949224c0 10.998926-8.999121 19.998047-19.998047 19.998047H143.985939c-10.998926 0-19.998047-8.999121-19.998047-19.998047v-519.949224c0-10.998926 8.999121-19.998047 19.998047-19.998047h735.928132m0-59.994141H143.985939c-44.195684 0-79.992188 35.796504-79.992188 79.992188v519.949224c0 44.195684 35.796504 79.992188 79.992188 79.992188h735.928132c44.195684 0 79.992188-35.796504 79.992188-79.992188v-519.949224c0-44.195684-35.796504-79.992188-79.992188-79.992188z"
                p-id="3652"
              ></path>
              <path
                d="M606.540768 661.035446l-229.27761-92.990919-233.277219 161.984181v41.995899h735.928132v-376.963187z"
                p-id="3653"
              ></path>
              <path
                d="M290.971585 352.065619c22.097842 0 39.996094 17.898252 39.996094 39.996094s-17.898252 39.996094-39.996094 39.996094-39.996094-17.898252-39.996094-39.996094 17.898252-39.996094 39.996094-39.996094m0-59.994142c-55.19461 0-99.990235 44.795625-99.990236 99.990236s44.795625 99.990235 99.990236 99.990235 99.990235-44.795625 99.990235-99.990235-44.795625-99.990235-99.990235-99.990236z"
                p-id="3654"
              ></path>
            </svg>
            相册管理
          </li>
          <li>
            <svg
              t="1641701990419"
              class="icon"
              viewBox="0 0 1024 1024"
              version="1.1"
              xmlns="http://www.w3.org/2000/svg"
              p-id="2636"
              width="24"
              height="18"
            >
              <path
                d="M819.2 998.4H358.4c-42.496 0-76.8-34.304-76.8-76.8V128C281.6 85.504 315.904 51.2 358.4 51.2h460.8c42.496 0 76.8 34.304 76.8 76.8V921.6c0 42.496-34.304 76.8-76.8 76.8zM358.4 102.4c-14.336 0-25.6 11.264-25.6 25.6V921.6c0 14.336 11.264 25.6 25.6 25.6h460.8c14.336 0 25.6-11.264 25.6-25.6V128c0-14.336-11.264-25.6-25.6-25.6H358.4z"
                p-id="2637"
              ></path>
              <path
                d="M407.552 998.4H153.6c-42.496 0-76.8-34.304-76.8-76.8v-384C76.8 495.104 111.104 460.8 153.6 460.8h153.6v51.2H153.6c-14.336 0-25.6 11.264-25.6 25.6V921.6c0 14.336 11.264 25.6 25.6 25.6h253.952v51.2z"
                p-id="2638"
              ></path>
              <path
                d="M588.8 307.2h-153.6c-14.336 0-25.6-11.264-25.6-25.6s11.264-25.6 25.6-25.6h153.6c14.336 0 25.6 11.264 25.6 25.6s-11.264 25.6-25.6 25.6zM640 460.8h-204.8c-14.336 0-25.6-11.264-25.6-25.6s11.264-25.6 25.6-25.6h204.8c14.336 0 25.6 11.264 25.6 25.6s-11.264 25.6-25.6 25.6zM742.4 614.4h-307.2c-14.336 0-25.6-11.264-25.6-25.6s11.264-25.6 25.6-25.6h307.2c14.336 0 25.6 11.264 25.6 25.6s-11.264 25.6-25.6 25.6zM742.4 768h-307.2c-14.336 0-25.6-11.264-25.6-25.6s11.264-25.6 25.6-25.6h307.2c14.336 0 25.6 11.264 25.6 25.6s-11.264 25.6-25.6 25.6z"
                p-id="2639"
              ></path>
            </svg>
            商品列表
          </li>
        </ul>
      </div>
      <div class="right_main">
        <div class="top_quantity">
          <section>
            <h4>30</h4>
            <p>关注人数（个）</p>
          </section>
          <section>
            <h4>120</h4>
            <p>订单总数（笔）</p>
          </section>
          <section>
            <h4>4183.80</h4>
            <p>今日订单总金额（元）</p>
          </section>
          <section>
            <h4>100</h4>
            <p>本月销量（笔）</p>
          </section>
        </div>
        <div class="cen_stat">
          <div class="left">
            <section>
              <p>店铺及商品提示<span>需要关注的店铺信息及待处理事项</span></p>
              <ul>
                <li>
                  <h3>64</h3>
                  <p>出售中</p>
                </li>
                <li>
                  <h3>10</h3>
                  <p>待回复</p>
                </li>
                <li>
                  <h3>0</h3>
                  <p>库存预警</p>
                </li>
                <li>
                  <h3>3</h3>
                  <p>仓库中</p>
                </li>
              </ul>
            </section>
            <section>
              <p>交易提示<span>需要立即处理的交易订单</span></p>
              <ul>
                <li>
                  <h3>0</h3>
                  <p>待付款</p>
                </li>
                <li>
                  <h3>10</h3>
                  <p>待发货</p>
                </li>
                <li>
                  <h3>0</h3>
                  <p>已发货</p>
                </li>
                <li>
                  <h3>3</h3>
                  <p>已收货</p>
                </li>
                <li>
                  <h3>3</h3>
                  <p>退款中</p>
                </li>
                <li>
                  <h3>3</h3>
                  <p>待售后</p>
                </li>
              </ul>
            </section>
          </div>
          <div class="right">
            <img src="../../assets/下载.png" alt="" />
          </div>
        </div>
        <div class="btm_stat">
          <section>
            <p>销售情况统计<span>按周期统计商家店铺的订单量和订单金额</span></p>
            <ol>
              <li>
                <div class="sales">昨日销量</div>
                <div class="sales_num">
                  <div class="money">订单金额（元）12</div>
                  <div class="quan">订单量（件）12</div>
                </div>
              </li>
              <li>
                <div class="sales">本月销量</div>
                <div class="sales_num">
                  <div class="money">订单金额（元）12</div>
                  <div class="quan">订单量（件）12</div>
                </div>
              </li>
            </ol>
          </section>
          <section>
            <p>单品销售排名<span>需要关注的店铺信息及待处理事项</span></p>
            <div class="min_box">
              <div class="head">
                <div class="SN">#</div>
                <div class="name">商品信息</div>
                <div class="name_sales">销量</div>
              </div>
              <ul>
                <li>
                  <div class="SN">1</div>
                  <div class="name">小天鹅（LittleSwan）滚筒洗衣机...</div>
                  <div class="name_sales">888</div>
                </li>
                <li>
                  <div class="SN">2</div>
                  <div class="name">小天鹅（LittleSwan）滚筒洗衣机...</div>
                  <div class="name_sales">888</div>
                </li>
                <li>
                  <div class="SN">3</div>
                  <div class="name">小天鹅（LittleSwan）滚筒洗衣机...</div>
                  <div class="name_sales">888</div>
                </li>
                <li>
                  <div class="SN">4</div>
                  <div class="name">小天鹅（LittleSwan）滚筒洗衣机...</div>
                  <div class="name_sales">888</div>
                </li>
                <li>
                  <div class="SN">5</div>
                  <div class="name">小天鹅（LittleSwan）滚筒洗衣机...</div>
                  <div class="name_sales">888</div>
                </li>
              </ul>
            </div>
          </section>
        </div>
      </div>
    </div>
  </div>
</template>
<script>
import HeadNav from '../../components/HeaderNav.vue'

export default {
components: {
    HeadNav,
  },

};
</script>
<style scoped>
.box {
  width: 100%;
  height: 100%;
  display: flex;
}
.left_nav {
  width: 190px;
  height: 865px;
  border-right: 1px solid rgb(223, 223, 223);
}
.left_nav > ul li {
  padding: 20px;
  font-size: 14px;
  vertical-align: top;
}
.left_nav > ul li:hover {
  background: rgb(240, 240, 240);
}
.right_main {
  background: rgb(235, 235, 235);
  width: 90%;
  height: 865px;
}
.right_main .top_quantity {
  display: flex;
  justify-content: space-evenly;
  padding-top: 20px;
}
.right_main .top_quantity section {
  width: 23%;
  height: 100px;
  background: #fff;
  padding: 20px;
}
.right_main .top_quantity section h4 {
  font-size: 24px;
  font-weight: 400;
}
.right_main .top_quantity section p {
  font-size: 14px;
}
.right_main .cen_stat {
  height: 300px;
  margin-top: 20px;
  display: flex;
  justify-content: space-evenly;
}
.right_main .cen_stat .left {
  width: 47%;
  height: 100%;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}
.right_main .cen_stat .left section p {
  padding: 15px;
  border-bottom: 1px solid rgb(236, 236, 236);
}
.right_main .cen_stat .left section p span {
  float: right;
  color: rgb(121, 158, 158);
}
.right_main .cen_stat .left section {
  width: 100%;
  height: 47%;
  background: #fff;
}
.right_main .cen_stat .left section ul {
  display: flex;
  justify-content: space-evenly;
  align-items: center;
}
.right_main .cen_stat .left section ul li {
  list-style: none;
  display: flex;
  flex-direction: column;
  align-items: center;
  background: rgb(250, 249, 249);
  margin-top: 10px;
  width: 20%;
  padding: 10px;
  box-sizing: border-box;
  border-radius: 10px;
  transition: all 0.5s linear;
}
.right_main .cen_stat .left section ul li:hover {
  background: #ccc;
}
.right_main .cen_stat .left section ul li p {
  border: none;
  padding: 0;
}
.right_main .cen_stat .left section:nth-child(2) ul li {
  width: 12%;
}
.right_main .cen_stat .right {
  width: 47%;
  height: 100%;
  padding: 30px;
  background: #fff;
  box-sizing: border-box;
}
.right_main .cen_stat .right img {
  width: 100%;
  height: 100%;
}
.right_main .btm_stat {
  margin-top: 20px;
  display: flex;
  justify-content: space-evenly;
}
.right_main .btm_stat section:nth-child(1) {
  width: 47%;
  background: #fff;
}
.right_main .btm_stat section p {
  padding: 15px;
  border-bottom: 1px solid rgb(236, 236, 236);
}
.right_main .btm_stat section p span {
  float: right;
  color: rgb(121, 158, 158);
}
.right_main .btm_stat section ol {
  width: 100%;
  height: 200px;
  padding: 0 20px;
  display: flex;
  flex-direction: column;
  justify-content: space-evenly;
}
.right_main .btm_stat section ol li {
  list-style: none;
  height: 40%;
  display: flex;
}
.right_main .btm_stat section ol li .sales {
  width: 130px;
  height: 100%;
  border: 1px solid rgb(221, 221, 221);
  display: flex;
  justify-content: center;
  align-items: center;
  font-size: 14px;
  background: rgb(241, 240, 240);
}
.right_main .btm_stat section ol li .sales_num {
  width: 100%;
  display: flex;
  flex-direction: column;
  border: 1px solid rgb(221, 221, 221);
}
.right_main .btm_stat section ol li .sales_num .money {
  height: 50%;
  border-bottom: 1px solid rgb(221, 221, 221);
  padding: 10px 20px;
}
.right_main .btm_stat section ol li .sales_num .quan {
  padding: 10px 20px;
}
.right_main .btm_stat section:nth-child(2) {
  width: 47%;
  background: #fff;
  box-sizing: border-box;
}
.right_main .btm_stat section .min_box {
  width: 100%;
  height: 100%;
  padding: 20px;
}
.right_main .btm_stat section .min_box .head {
  display: flex;
  justify-content: space-evenly;
  height: 40px;
}
.right_main .btm_stat section .min_box .head .SN {
  width: 100px;
  border: 1px solid rgb(228, 226, 226);
  line-height: 40px;
  padding-left: 20px;
}
.right_main .btm_stat section .min_box .head .name {
  width: 100%;
  border: 1px solid rgb(228, 226, 226);
  line-height: 40px;
  padding-left: 20px;
  color: rgb(116, 116, 116);
}
.right_main .btm_stat section .min_box .head .name_sales {
  width: 100px;
  border: 1px solid rgb(228, 226, 226);
  line-height: 40px;
  padding-left: 20px;
}
.right_main .btm_stat section .min_box ul {
  height: 150px;
  overflow-y: auto;
}
.right_main .btm_stat section .min_box li {
  list-style: none;
  display: flex;
  justify-content: space-evenly;
  height: 40px;
}
.right_main .btm_stat section .min_box li .SN {
  width: 100px;
  border: 1px solid rgb(228, 226, 226);
  line-height: 40px;
  padding-left: 20px;
}
.right_main .btm_stat section .min_box li .name {
  width: 100%;
  border: 1px solid rgb(228, 226, 226);
  line-height: 40px;
  padding-left: 20px;
  color: rgb(116, 116, 116);
}
.right_main .btm_stat section .min_box li .name_sales {
  width: 100px;
  border: 1px solid rgb(228, 226, 226);
  line-height: 40px;
  padding-left: 20px;
}
</style>